<template>
  <div>
    <div class="wxtip" id="Tip" v-if="isWx">
    <span class="wxtip-icon"></span>
    </div>
      <div class="_content" v-else>
          <div class="_head">
      
          </div>
          <div class="_list_con">
            <div class="_list_top">
              <div class="_list_top_left">
                <el-image :src="imgUrl" fit="cover"></el-image>
              </div>
              <div class="_list_top_right">
                <h3>{{title}}</h3>
                <h4>型号：{{code}}</h4>
              </div>
            </div>
            <div class="_list_item" v-for="(item,index) in itemList" :key="index">
              <el-checkbox v-model="item.isCheck" :label="item.name" border></el-checkbox>
            </div>
            <div class="_list_btn">
      
              <el-button v-if="hasFile" style="width:60vw;" @click="downFile" type="primary">下 载</el-button>
              <h3 v-else style="color:gray">当前产品资料未上传</h3>
            </div>
          </div>
      </div>
  </div>

</template>

<script>
const baseURL = process.env.VUE_APP_BASE_API
import { saveAs } from 'file-saver'
import axios from 'axios'
export default {
  name: "QRcode",
  components: {  },
  data() {
    return {
      isWx: false,
      title:"",
      code:"",
      imgUrl:"",
      itemList:[],
      hasFile:false
    }
  },
  watch: {

  },
  created() {
    // 是否微信打开
    if (/(micromessenger)/i.test(navigator.userAgent)) {
      this.isWx=true;
    }
  },
  mounted(){
    let id = this.$route.query.id
    //根据设备id获取设备下载列表
    this.getDevFiles(id);
  },
  methods: {
      getDevFiles(id){
        let imgPath = '/img/mark.png';
        let base_url=baseURL;
        var url = baseURL + "/common/files?id=" + id;
        let that = this;
        axios({
          method: 'get',
          url: url,
        }).then(async (response) => {
          response = response.data;
          that.imgUrl = imgPath;
          if (response.cate.imagePath && response.cate.imagePath!=null && base_url + response.cate.imagePath.length>0){
            that.imgUrl = base_url + response.cate.imagePath;
          }
          that.title = response.cate.productName;
          that.code = response.cate.productCode;
          that.itemList = [];
          let files = response.files;
          for (let k = 0; k < files.length; k++) {
            const f = files[k];
            that.itemList.push({ name: f.fileName, url: f.filePath, isCheck: false });
          }
          if(that.itemList.length>0){
            that.hasFile=true;
          }
        })
      },
      downFile(){
        for (let k = 0; k < this.itemList.length; k++) {
            const f = this.itemList[k];
            let url = f.url;
            if(f.isCheck){
              this.handleDownload(url,f.name);
            }
          }
      },
    handleDownload(fileUrl,fileName){
      var url = baseURL + "/common/download/resource?resource=" + encodeURI(fileUrl);
      axios({
        method: 'get',
        url: url,
        responseType: 'blob',
      }).then(async (res) => {
        const blob = new Blob([res.data])
        saveAs(blob, fileName)
      })
    }
  }
};
</script>
<style scoped>
._content{
    display: flex;
    width:100vw;
    height: 100vh;
    background-color: rgb(241, 241, 241);
}
._head{
    width:100vw;
    height: 15vh;
    background-color: #46a6ff;
}
._list_con{
  border-radius: 15px;
  width: 90vw;
  position: absolute;
  top: 8vh;
  left: 5vw;
  height: 80vh;
  background-color: white;
  padding: 20px;
}
._list_top{
  display: flex;
  padding:10px;
}
._list_top_left{
  width:30vw;
}
._list_top_right{
  padding-left:2vw;
  width:68vw;
}
._list_item{
  padding:10px;

}
.el-checkbox.is-bordered.el-checkbox--medium{
  width:70vw;
}
._list_btn{
  text-align: center;
  padding: 20px;
}
.wxtip {
  background: rgba(0, 0, 0, 0.8);
  text-align: center;
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  z-index: 999;
  padding: 30px;
}

.wxtip-icon {
  width: 90vw;
  height: 50vh;
  background: url('/img/tip.png') no-repeat;
  display: block;
  margin: 0 atuo;
  background-size: 100%;
}
</style>
